<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zxx">
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script>
	addEventListener("load", function() {
		setTimeout(hideURLbar, 0);
	}, false);

	function hideURLbar() {
		window.scrollTo(0, 1);
	}
</script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"
	media="all">
<!-- shop css -->
<link href="css/shop.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //Custom Theme files -->
<!-- online-fonts -->
<!-- logo -->
<link href="http://fonts.googleapis.com/css?family=Fredericka+the+Great"
	rel="stylesheet">
<!-- titles -->
<link
	href="http://fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800,800i"
	rel="stylesheet">
<!-- body -->
<link
	href="http://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"
	rel="stylesheet">
<!-- //online-fonts -->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
	<div id="home">
		<!-- header -->
		<!-- navbar -->
		<nav class="navbar navbar-default navbar-fixed-top">
		<div class="main-nav">
			<div class="container">

				<div class="navbar-header page-scroll">
					<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target=".navbar-ex1-collapse">
						<span class="sr-only">Chronicle</span> <span class="icon-bar"></span>
						<span class="icon-bar"></span> <span class="icon-bar"></span>
					</button>
					<h1>
						<a class="navbar-brand" href="index.html">Chronicle</a>
					</h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-ex1-collapse nav-right">
					<ul class="nav navbar-nav navbar-left cl-effect-15">
						<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
						<li class="hidden"><a class="page-scroll" href="#page-top"></a>
						</li>
						<li><a href="index.html">Home</a></li>
						<li><a href="about.html">about us</a></li>
						<li class="dropdown"><a href="#"
							class="dropdown-toggle effect-3" data-toggle="dropdown">shop
								<b class="caret"></b>
						</a>
							<ul class="dropdown-menu">
								<li><a href="shop.html">product catalog</a></li>
								<li><a href="single_product.html">single product</a></li>
								<li><a href="checkout.html">checkout</a></li>
								<li><a href="payment.html">Payment</a></li>
							</ul></li>
						<li class="dropdown"><a href="#"
							class="dropdown-toggle effect-3" data-toggle="dropdown">footers
								<b class="caret"></b>
						</a>
							<ul class="dropdown-menu">
								<li><a href="footer.html">Default</a></li>
								<li><a href="footer1.html">variant1</a></li>
								<li><a href="footer2.html">variant2</a></li>
								<li><a href="footer3.html">variant3</a></li>
								<li><a href="footer4.html">variant4</a></li>
							</ul></li>
						<li><a href="contact.html">Contact us</a></li>
						<li><a href="login.html" title="SignIn & SignUp"> <span
								class="fa fa-user nav-icon" aria-hidden="true"></span>
						</a></li>

					</ul>
					<!-- search-bar -->
					<div class="search-bar-agileits">
						<div class="cd-main-header">
							<ul class="cd-header-buttons">
								<li><a class="cd-search-trigger" href="#cd-search"> <span></span>
								</a></li>
							</ul>
							<!-- cd-header-buttons -->
						</div>
						<div id="cd-search" class="cd-search">
							<form action="#" method="post">
								<input name="Search" type="search"
									placeholder="Type and Hit Enter...">
							</form>
						</div>
					</div>
					<!-- //search-bar ends here -->
					<!-- shopping cart -->
					<div class="cart-mainf">
						<div class="chrcart chrcart2 cart cart box_1">
							<form action="#" method="post" class="last">
								<input type="hidden" name="cmd" value="_cart"> <input
									type="hidden" name="display" value="1">
								<button class="top_chr_cart" type="submit" name="submit"
									value="">
									<i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
								</button>
							</form>
						</div>
					</div>
					<!-- //shopping cart ends here -->
				</div>
				<!-- /.navbar-collapse -->
				<div class="clearfix"></div>
			</div>
			<!-- /.container -->
		</div>
		</nav>
		<!-- //navbar ends here -->
		<!-- banner -->
		<div class="banner-bg-inner">
			<!-- banner-text -->
			<div class="banner-text-inner">
				<div class="container">
					<h2 class="title-inner">爱阅电子书城</h2>

				</div>
			</div>
			<!-- //banner-text -->
		</div>
		<!-- //banner -->
		<!-- breadcrumbs -->
		<div class="crumbs text-center">
			<div class="container">
				<div class="row">
					<ul class="btn-group btn-breadcrumb bc-list">
						<li class="btn btn1"><a href="index.html"> <i
								class="glyphicon glyphicon-home"></i>
						</a></li>
						<li class="btn btn2"><a href="login.html">登录 & 注册</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!--//breadcrumbs ends here-->
		<!-- signin and signup form -->
		<div class="login-form section text-center">
			<div class="container">
				<h4 class="rad-txt">
					<span class="abtxt1">登录</span> <span class="abtext">注册</span>
				</h4>
				<div id="loginbox" style="margin-top: 30px;"
					class="mainbox  loginbox">
					<div class="panel panel-info">
						<div class="panel-heading">
							<div class="panel-title">登录</div>
							<div class="fpassword">
								<a href="#">忘记密码?</a>
							</div>
						</div>
						<div style="padding-top: 30px" class="panel-body">
							<div style="display: none" id="login-alert"
								class="alert alert-danger col-sm-12"></div>
							<form id="loginform" class="form-horizontal" action="UserServlet"
								method="post">
								<span style="color: red"><%=request.getAttribute("msg") == null ? "" : request.getAttribute("msg")%></span>
								<div style="margin-bottom: 25px" class="input-group">
									<span class="input-group-addon"> <i
										class="glyphicon glyphicon-user"></i>
									</span> <input id="login-username" type="text" class="form-control"
										name="username" value="" placeholder="请输入用户名" required="">
								</div>

								<div style="margin-bottom: 25px" class="input-group">
									<span class="input-group-addon"> <i
										class="glyphicon glyphicon-lock"></i>
									</span> <input id="login-password" type="password"
										class="form-control" name="password" placeholder="请输入密码"
										required="">
								</div>
								<div class="input-group">
									<div class="checkbox">
										<label> <input id="login-remember" type="checkbox"
											name="remember" value="1"> 记住账号
										</label>
									</div>
								</div>
								<input type="hidden" name="op" value ="login">
								<div style="margin-top: 10px" class="form-group">
									<!-- Button -->
									<div class="col-sm-12 controls">
										<input type="submit" id="btn-login" class="btn btn-success" name="" id="" value="登录" />
									</div>
								</div>
								<div class="form-group">
									<div class="col-md-12 control">
										<div
											style="border-top: 1px solid #888; padding-top: 15px; font-size: 85%">
											没有账号？ <a href="#"
												onClick="$('#loginbox').hide(); $('#signupbox').show()">
												在这注册 </a>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
				<div id="signupbox" style="display: none; margin-top: 50px"
					class="mainbox loginbox">
					<div class="panel panel-info">
						<div class="panel-heading">
							<div class="panel-title">注册</div>
							<div
								style="float: right; font-size: 85%; position: relative; top: -10px">
								<a id="signinlink" href="#"
									onclick="$('#signupbox').hide(); $('#loginbox').show()">登录</a>
							</div>
						</div>
						<div class="panel-body">
							<form id="signupform" class="form-horizontal" action="UserServlet"
								method="post" onsubmit="return checkall()">
								<div id="signupalert" style="display: none"
									class="alert alert-danger">
									<p>Error:</p>
									<span></span>
								</div>
								<div class="form-group">
									<label class="col-md-3 col-sm-3 col-xs-3 control-label">用户名</label>
									<div class="col-md-9 col-sm-9 col-xs-9">
										<input type="text" class="form-control" id="username" name="username"
											placeholder="请输入用户名" required>
									</div>
								
								</div>
	<span id="msg" style="color: red"></span> 
								<div class="form-group">
									<label class="col-md-3 col-sm-3 col-xs-3 control-label">密码</label>
									<div class="col-md-9 col-sm-9 col-xs-9">
										<input type="password" class="form-control" name="userpwd"
											placeholder="请输入密码" required >
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-3 col-sm-3 col-xs-3 control-label">身份证号</label>
									<div class="col-md-9 col-sm-9 col-xs-9">
										<input type="text" class="form-control" name="idcard" id="idcard"
											placeholder="请输入身份证号" required onblur="checkidcard()">
									</div>
									<span id="msgidcard"></span>
								</div>
								<div class="form-group">
									<label class="col-md-3 col-sm-3 col-xs-3 control-label">联系方式</label>
									<div class="col-md-9 col-sm-9 col-xs-9">
										<input type="text" class="form-control" name="tel" id="tel"
											placeholder="请输入联系方式" required onblur="checktel()">
									</div>
									<span id="msgtel"></span> 
								</div>
								<div class="form-group">
									<label class="col-md-3 col-sm-3 col-xs-3 control-label">地址</label>
									<div class="col-md-9 col-sm-9 col-xs-9">
										<input type="text" class="form-control" name="addr" id="addr"
											placeholder="请输入地址" required>
									</div>
								</div>
								<!-- 隐藏域 -->
								<input type="hidden" name="op" value="register"/>
								<div class="form-group">
									<!-- Button -->
									<div class="signup-btn">
										<input type="submit" id="btn-login" class="btn btn-success" name="" id="" value="注册" />
										</button>
									</div>
								</div>

							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--//signin and signup form ends here-->

	<!-- js -->
	<script src="js/jquery-2.2.3.min.js"></script>
	<!-- //js -->
	<!--search jQuery-->
	<script src="js/main.js"></script>
	<!--search jQuery-->
	<!-- cart-js -->
	<script src="js/minicart.js"></script>
	<script>
		chr.render();

		chr.cart.on('new_checkout', function(evt) {
			var items, len, i;

			if (this.subtotal() > 0) {
				items = this.items();

				for (i = 0, len = items.length; i < len; i++) {
				}
			}
		});
	</script>
	<!-- //cart-js -->

	<!-- dropdown nav -->
	<script>
		$(document).ready(function() {
			$(".dropdown").hover(function() {
				$('.dropdown-menu', this).stop(true, true).slideDown("fast");
				$(this).toggleClass('open');
			}, function() {
				$('.dropdown-menu', this).stop(true, true).slideUp("fast");
				$(this).toggleClass('open');
			});
		});
	</script>
	<!-- //dropdown nav -->

	<!-- Scrolling Nav JavaScript -->
	<script src="js/scrolling-nav.js"></script>
	<!-- //fixed-scroll-nav-js -->
	<!-- start-smooth-scrolling -->
	<script src="js/move-top.js"></script>
	<script src="js/easing.js"></script>
	<script>
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event) {
				event.preventDefault();

				$('html,body').animate({
					scrollTop : $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!-- //end-smooth-scrolling -->
	<!-- smooth-scrolling-of-move-up -->
	<script>
		$(document).ready(function() {
			/*
			var defaults = {
			    containerID: 'toTop', // fading element id
			    containerHoverID: 'toTopHover', // fading element hover id
			    scrollSpeed: 1200,
			    easingType: 'linear' 
			};
			 */

			$().UItoTop({
				easingType : 'easeOutQuart'
			});

		});
	</script>


	<!-- 用户注册验证 注册 -->
	<script>
		//标记一下ajaxName函数是否有执行
		var msg = "";
		$(function() {
			//文本框事件 ： 失去焦点
			$("#username").blur(function() {
				ajaxName();
			});
		});

		function checkidcard(){
			var str=$("#idcard").val();
			var reg = /^\d{17}[0-9,X]$/;
			var flag=reg.test(str);
			if(flag){
				$("#msgidcard").hide();
				return true;
			}else{
				$("#msgidcard").html("身份证号输入不合法");
				return false;
			}
		}
		
		function checktel() {
			var str4 = $("#tel").val();
			var reg = /^[0-9]{11}$/;
			var flag = reg.test(str4)
			if (flag) {
				$("#msgtel").hide();
				return true;
			} else {
				$("#msgtel").html("手机号码为11位数字");
				return false;//表单不提交
			}
		}
		function checkall() {
			var idcard=checkidcard();
			var tel = checktel();
			if ( idcard && tel) {
				return true;
			} else {
				return false;
			}
		}

		function ajaxName() {
			$.ajax({
				//key:value
				url : "UserServlet",
				type : "get",
				data : {
					username : $("#username").val(),
					op : "ajaxusername"
				},
				success : function(data) {
					//console.log("data->msg: " + data);
					msg = data;
					//其实在前端有一些必要判断
					if (data.msg == "notexists") {
						//这个内容是在前端自定义的，也给前端人员一些自由
						$("#msg").html("可以使用!");
					} else {
						$("#msg").html("重复了，换一个!");
					}

					//$("#msg")得到页面上额id为msg的哪个span
				},
				dataType : "json"
			});
		}

		function check() {
			//点击增加按钮的时候，都要判断是否有重复的内容(类型重复)
			//1 重复校验和判断
			if (msg == "notexists") {
				return true;//表单要提交
			} else {
				return false;//2表单不提交
			}

		}
	</script>

	<script src="js/SmoothScroll.min.js"></script>
	<!-- //smooth-scrolling-of-move-up -->
	<!-- Bootstrap core JavaScript
 ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/bootstrap.js"></script>
</body>

</html>